<script>
// 当传递的数据发生变化，组件不会重新挂载。（挂载阶段的钩子函数不会再次执行）
// 如果将接收的参数进行更改是不会进行响应式的。
//
export default {
    name: "GoodsList",
    data(){
        console.log("data");
        // console.log(this.$route.query)
        const {a,b,c} = this.$route.query;
        return {
            a,
            b,
            c
        }
    },
    methods:{
        fn(){
            // 如果将接收的参数进行更改是不会进行响应式的。
            this.$route.query.a = 1000;
            console.log(this.$route.query.a)
        }
    },
    watch:{
        // "$route.query.c"(newValue,oldValue){
        //     console.log("$route.query.c",newValue,oldValue);
        // }

        "$route.query"(newValue,oldValue){
            console.log("$route.query",newValue,oldValue);
        }
    },
    updated(){
        console.log("updated")
    },
    mounted(){
        console.log("mounted",this.$route.query)
    }
}
</script>

<template>
    <div>
        <h3>商品列表页面</h3>
        <router-link :to="{
            path:'/goodsList',
            query:{
                ...$route.query,
                c:900
            }
        }">商品列表</router-link>
        <button @click="fn">更改无响应式</button>
        <hr/>
        <router-link :to="{path:'/goodsList',query:{
            a:100,
            b:200,
            c:300
        }}">商品列表</router-link>
        <hr/>
        <p>a:{{$route.query.a}}|{{a}}</p>
        <p>b:{{$route.query.b}}|{{b}}</p>
        <p>c:{{$route.query.c}}|{{c}}</p>
    </div>

</template>

<style scoped>

</style>